<template>
<div class="details">
    <div class="top">
        <!--轮播-->
        <swiper class="swi" ref="mySwiper" :options="swiperOptions">
            <swiper-slide><router-link to=""><img :src="par[0].src1" alt=""></router-link></swiper-slide>
            <swiper-slide><router-link to=""><img :src="par[0].src2" alt=""></router-link></swiper-slide>
            <swiper-slide><router-link to=""><img :src="par[0].src3" alt=""></router-link></swiper-slide>
            <swiper-slide><router-link to=""><img :src="par[0].src4" alt=""></router-link></swiper-slide>
            <swiper-slide><router-link to=""><img :src="par[0].src5" alt=""></router-link></swiper-slide>
        </swiper>
        <!--左箭头  分享  更多-->
        <div class="nav">
            <div>
                <router-link to="/journey"><i class="iconfont icon-zuojiantou"></i></router-link>
            </div>
            <div>
                <router-link to=""><i class="iconfont icon-fenxiang"></i></router-link>
                <router-link to=""><i class="iconfont icon-more"></i></router-link>
            </div>
        </div>
        <!--详情及价格-->
        <div class="particulars">
            <div>{{par[0].miao}}</div>
            <div>
                <span>{{par[0].p1}}</span>
                <span>{{par[0].p2}}</span>
                <span>{{par[0].p3}}</span>
            </div>
            <div>
                <span>￥{{par[0].price}}</span>
                <span>月售{{par[0].sales}}</span>
            </div>
        </div>
        <!--服务  二次确认-->
        <div class="hr">
            <div>
                <span>服务</span>
                <span><i class="iconfont icon-gouxuan"></i>二次确认</span>
            </div>
            <router-link to=""><i class="iconfont icon-iconfontjiantou5"></i></router-link>
        </div>
        <div class="br"></div>
        <!--领券-->
        <div class="coupon">
            <div>
                <span>领券</span>
                <div>
                    <span>满300-40</span>
                    <span>满500-80</span>
                </div>
            </div>
            <router-link to=""><i class="iconfont icon-iconfontjiantou5"></i></router-link>
        </div>
        <!--优惠-->
        <div class="discounts">
            <div>
                <span>优惠</span>
                <div>
                    <span>活动</span>
                    <span>京东白条单单减，3期免息不限量</span>
                </div>
            </div>
            <router-link to=""><i class="iconfont icon-iconfontjiantou5"></i></router-link>
        </div>
        <div class="br"></div>

    </div>
    <!--底部-->
    <div class="ends">
        <div>
            <router-link to="">
                <i class="iconfont icon-kujialeqiyezhan_zaixiankefu-"></i>
                <span>客服</span>
            </router-link>
            <router-link to="">
                <i class="iconfont icon-dianpu1"></i>
                <span>店铺</span>
            </router-link>
            <router-link to="">
                <i class="iconfont icon-shoucang"></i>
                <span>收藏</span>
            </router-link>
        </div>
        <router-link to="" @click.native="add(par[0].id)">加入购票</router-link>
    </div>
</div>
</template>
<style lang="less" scoped>
    *{
        margin: 0;
        padding: 0;
        box-sizing: border-box;
        list-style-type: none;
        text-decoration: none;
    }
    .top{
        width: 100%;
        height: 5.33rem;
        position: absolute;
        top: 0;
        left: 0;
        //  轮播
        .swi {
            height: 100%;
            img {
                width: 100%;
                height: 100%;
            }
        }
        .nav{
            position: absolute;
            left: 0;
            top: 0.267rem;
            z-index: 1;
            color: #fff;
            width: 100%;
            display: flex;
            >div:nth-child(1){
                text-align: left;
                width: 75%;
                margin-left: 0.213rem;
                a{
                    width: 0.933rem;
                    height: 0.933rem;
                    border-radius: 50%;
                    background-color: rgba(0,0,0,.5);
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    >i{
                        font-size:0.666rem;
                        color: #fff;
                    }
                }
            }
            >div:nth-child(2){
                width: 25%;
                text-align: right;
                display: flex;
                justify-content: space-evenly;
                >a{
                    width: 0.933rem;
                    height: 0.933rem;
                    border-radius: 50%;
                    background-color: rgba(0,0,0,.5);
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    >i{
                        font-size:0.666rem;
                        color: #fff;
                    }
                }
            }
        }
        //  详细信息
        .particulars{
            >div:nth-child(1){
                text-align: left;
                font-size: 0.373rem;
                font-weight: bold;
                margin: 0.187rem 0 0 0.267rem;
            }
            >div:nth-child(2){
                text-align: left;
                height: 0.8rem;
                line-height: 0.8rem;
                >span{
                    padding: 0.053rem 0.133rem;
                    background-color: #eee;
                    border-radius: 0.267rem;
                    margin-left: 0.133rem;
                }
            }
            >div:nth-child(3){
                display: flex;
                justify-content: space-between;
                height: 0.48rem;
                align-items: center;
                width: 96%;
                margin: auto;
                >span:nth-child(1){
                    color: red;
                    font-size: 0.533rem;
                    font-weight: bold;
                }
                >span:nth-child(2){
                    font-size: 0.373rem;
                }
            }
        }
        //  二次确认
        .hr{
            width: 96%;
            height: 0.8rem;
            margin: 0.267rem auto 0;
            border-top: 0.027rem solid #ccc;
            display: flex;
            justify-content: space-between;
            align-items: center;
            >div:nth-child(1){
                line-height: 0.8rem;
                >span:nth-child(1){
                    margin-right: 0.267rem;
                }
                >span:nth-child(2){
                    >i{
                        font-size: 0.346rem;
                    }
                }
            }
        }
        .br{
            height: 10px;
            background-color: #eee;
        }
        //  领券
        .coupon{
            width: 96%;
            height: 0.8rem;
            margin: 0.133rem auto 0;
            display: flex;
            justify-content: space-between;
            align-items: center;
            >div:nth-child(1){
                display: flex;
                line-height: 0.8rem;
                >span{
                    margin-right: 0.267rem;
                    color: #666;
                }
                >div{
                    >span{
                        border: 0.027rem solid red;
                        color: red;
                        padding: 0.08rem;
                        border-radius: 0.267rem;
                    }
                    >span:nth-child(1){
                        margin-right: 0.267rem;
                    }
                }
            }
        }
        .discounts{
            width: 96%;
            height: 0.8rem;
            margin: 0.133rem auto;
            display: flex;
            justify-content: space-between;
            align-items: center;
            >div:nth-child(1){
                display: flex;
                line-height: 0.8rem;
                >span{
                    margin-right: 0.267rem;
                    color: #666;
                }
                >div{
                    >span:nth-child(1){
                        color: red;
                        background-color: #FEE6F3;
                        padding: 0.053rem;
                        margin-right: 0.133rem;
                    }
                }
            }
        }
    }
    //  底部
    .ends{
        position: fixed;
        bottom: 0;
        left: 0;
        height: 55px;
        background-color: #fff;
        width: 100%;
        display: flex;
        justify-content: space-between;
        padding: 0 4%;
        align-items: center;
        border-top: 0.027rem solid #ccc;
        //  客服  店铺   收藏
        >div{
            display: flex;
            justify-content: space-between;
            width: 35%;
            align-items: center;
            >a{
                display: flex;
                flex-flow: column;
                justify-content: center;
                align-items: center;
                color: #000;
                >i{
                    font-size: 0.666rem;
                    color: #000;
                }
            }
            >a:nth-child(1){
                >i{
                    font-size: 0.666rem;
                    color: #0086b3;
                }
            }
        }
        //  立即购买
        >a{
            padding: 0.32rem 1.999rem;
            background-color: yellow;
            color: #000;
            font-size: 0.4rem;
            font-weight: bold;
            border-radius: 0.586rem;
        }
    }

</style>
<script>
    export default {
        name:'Details',
        data(){
            return {
                swiperOptions: {autoplay: true, loop: true},   //循环播放
                par:[{"id":1,"view":"田园之家旅行社","img":"img/lvyou1.jpg","name":"蜈支洲岛","time":"2019-01-05","text":"浪漫的潜水度假胜地","miao":"仙都景色美在天然，奇峰异石，千姿百态，兼有“桂林之秀、黄山之奇、华山之险”。","price":"140","count":1,"sales":0,"stat":false,"p1":"海量好评商家","p2":"海景房","p3":"赠景点礼包","src1":"img/lvyou1.jpg","src2":"img/lvyou31.jpg","src3":"img/lvyou32.jpg","src4":"img/lvyou33.jpg","src5":"img/lvyou34.jpg"},],
                particulars:[],
            }
        },
        methods:{
            //   //  点击加入购物车
            add(id){
               if (localStorage.getItem('user')!==null){
                   var list = {
                       id: this.particulars[id-1].id,
                       view: this.particulars[id-1].view,
                       img: this.particulars[id-1].img,
                       name: this.particulars[id-1].name,
                       time: this.particulars[id-1].time,
                       text: this.particulars[id-1].text,
                       price: this.particulars[id-1].price,
                       count: this.particulars[id-1].count,
                       sales: this.particulars[id-1].sales,
                       stat: this.particulars[id-1].stat,
                       chk: this.particulars[id-1].chk,
                       miao: this.particulars[id-1].miao,
                       p1: this.particulars[id-1].p1,
                       p2: this.particulars[id-1].p2,
                       p3: this.particulars[id-1].p3,
                       src1: this.particulars[id-1].src1,
                       src2: this.particulars[id-1].src2,
                       src3: this.particulars[id-1].src3,
                       src4: this.particulars[id-1].src4,
                       src5: this.particulars[id-1].src5,
                   };
                   this.$store.commit('Add', list);
                   //  购物车本地存储
                   localStorage.setItem('list',JSON.stringify(this.$store.state.list));
                   alert('加入购票成功');
                   this.$router.push('shopping');
               } else {
                   var confirm1=confirm('您还没有登录，去登录？');
                   if (confirm1){
                       this.$router.push('login');
                   }
               }
            },
        },
        mounted(){
            this.par=this.$store.state.arr;
            this.$axios.get('http://118.178.85.166:3000/shopping').then((data)=>{
                //  全部数据
                let Data=data.data;
               //  商品
               //  this.particulars=Data.particulars;
            }).catch((err)=>{
                console.log('这是details.vue中的错误:'+err);
            });
            this.particulars=this.$store.state.particulars;
        }
    }
</script>